import * as Action from '../../store/action/actionCounter'
import {connect} from 'react-redux'
import Counter from './Counter'

// react-redux :  
// 容器组件 ： 业务逻辑 数据管理 内部维护状态 UI组件做视图呈现
// UI组件 ： 数据 和行为 => props =>函数组件

// const Container  = connect(数据增强，行为增强)(ui组件)

// 数据增强
const mapStateToProps = state=>({count:state.count})

const mapDispatchToProps = dispatch =>({
    increament:()=>dispatch(Action.increamentAction()),
    decreament:()=>dispatch(Action.decreamentAction()),
 })




// 05 定义容器组件 ： 5.1 定义UI组件  5.2 定义state=>UI  5.3 定义dispatch=>UI
const Container  = connect(mapStateToProps,mapDispatchToProps)(Counter)


export default Container

//01 传递 mapStateToProps, mapDispatchToProps 回调函数 ： 就是增强内容
// const connnect =  (mapStateToProps,mapDispatchToProps) =>{
//   //02 传递 UI组件Counter
//   return (Component)=>{
//     //03 UI组件 增强
//     class Container extends Component{
//        //04 获取store 的state 
//        constructor(props){
//         //外界通过props 传递给容器组件 store
//          this.store = props.store
//          this.state  =this.store.getState()
//        }
//        componentDidMount(){
//          this.store.subscribe(()=>{
//            this.setState({
//              state=this.store.geteState()
//            })
//          })
//        }


//       // 05 获取store 的diapatch方法
//        const dispatch = this.store.dispatch
   

//        // 06 增强的回调函数 方式获取传入 state / dispatch
//        mapStateToProps(this.state)
//        mapDispatchToProps(dispatch)

//        //07 将mapStateToProps  mapDispatchToProps 解包 k-v传入到UI组件 => props {k-v}
//        render(){
//           return <Component {...mapStateToProps} {...mapDispatchToProps}/>
//         //  return <Component value={this.state}   
//         //                    increment={()=>dispatch(Action.increamentAction()}
//         //                    decrement={()=>dispatch(Action.decreamentAction()}
//         //                    />
//        }


//     }

//     return Container
//   }
// }






